import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/route/route.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

class CategorySelected extends StatefulWidget {
  const CategorySelected({Key? key}) : super(key: key);

  @override
  State<CategorySelected> createState() => _CategorySelectedState();
}

class _CategorySelectedState extends State<CategorySelected> with SingleTickerProviderStateMixin {
  late final TabController _controller;

  final List<String> tabs = ['主营品类', '辅营品类（选填）'];

  @override
  void initState() {
    _controller = TabController(length: tabs.length, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Widget get titleAction {
    return Text.rich(TextSpan(children: [
      TextSpan(text: '1/', style: StylesUtils.customTextStyle(fontSize: Sizes.default18)),
      TextSpan(text: '4', style: StylesUtils.customTextStyle(color: ColorsUtils.colorFeb)),
      TextSpan(text: '选择品类', style: StylesUtils.customTextStyle(fontSize: Sizes.default18))
    ]));
  }

  void openHelp() {
    showDialog<void>(
        context: context,
        builder: (BuildContext context) {
          return BrnDialog(
            themeData: BrnDialogConfig(
              dialogWidth: 300,
              radius: Sizes.default10,
              backgroundColor: Colors.white,
              titlePaddingLg: EdgeInsets.zero,
              titlePaddingSm: EdgeInsets.zero,
              titleTextAlign: TextAlign.center,
              contentPaddingLg: EdgeInsets.zero,
              contentPaddingSm: EdgeInsets.zero,
              contentTextAlign: TextAlign.left,
            ),
            titleWidget: Container(
              height: Sizes.default50,
              alignment: Alignment.center,
              child: Text('选择帮助',
                  style: StylesUtils.customTextStyle(
                      fontSize: Sizes.default18, color: ColorsUtils.color000)),
            ),
            contentWidget: Container(
              padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
              child: Column(
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Text('1、如何选择店铺类型？',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    margin: const EdgeInsets.only(top: Sizes.default8),
                    child: Text('餐饮店铺与零售店铺对应的主营、辅营品类各不相同，请根据您的经营品类选择相应的店铺类型。',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color797)),
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    margin: const EdgeInsets.only(top: Sizes.default8),
                    child: Text('2、品类选择后可以修改吗？',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    margin: const EdgeInsets.only(top: Sizes.default8),
                    child: Text('可以在 我的 > 店铺信息 中修改品类。',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color797)),
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    margin: const EdgeInsets.only(top: Sizes.default8),
                    child: Text('3、商品种类多，如何确定主营品类？',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    margin: const EdgeInsets.only(top: Sizes.default8),
                    child: Text('若您的店铺经营多种商品，或不知如何确定主营品类时，可将主要经营或销售最好的商品作为主营品类，将其他任一种商品作为辅营品类即可。',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.color797)),
                  ),
                  Container(
                    alignment: Alignment.center,
                    padding: const EdgeInsets.only(top: Sizes.default15),
                    child: SizedBox(
                      width: 205,
                      height: Sizes.default40,
                      child: GFButton(
                          focusColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf6),
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          text: '我知道了',
                          textStyle: StylesUtils.customTextStyle(
                              fontSize: Sizes.default16, color: ColorsUtils.colorFf6),
                          shape: GFButtonShape.pills,
                          type: GFButtonType.outline,
                          size: GFSize.LARGE,
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf6)),
                    ),
                  )
                ],
              ),
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.customBrnAppBar(titleAction,
          actions: BrnTextAction(
            '如何选择',
            iconPressed: openHelp,
            themeData: BrnAppBarConfig(
                actionsStyle: BrnTextStyle(
                    color: Colors.white, fontSize: Sizes.default15, fontWeight: FontWeight.normal)),
          )),
      body: Column(
        children: [
          Container(
            decoration: const BoxDecoration(color: Colors.white),
            height: Sizes.default50,
            alignment: Alignment.center,
            child: FractionallySizedBox(
              widthFactor: 0.8,
              heightFactor: 0.8,
              child: Row(
                children: [
                  Expanded(
                      child: Container(
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf6),
                        borderRadius: const BorderRadius.only(
                            topLeft: Radius.circular(Sizes.default20),
                            bottomLeft: Radius.circular(Sizes.default20))),
                    child: Text('店铺餐饮', style: StylesUtils.defaultTextStyle(Sizes.default15)),
                  )),
                  Expanded(
                      child: Container(
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: ColorsUtils.rgba(245, 245, 245, 1),
                        borderRadius: const BorderRadius.only(
                            topRight: Radius.circular(Sizes.default20),
                            bottomRight: Radius.circular(Sizes.default20))),
                    child: Text('零售店铺',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ))
                ],
              ),
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: Sizes.default10),
            alignment: Alignment.center,
            decoration: const BoxDecoration(color: Colors.white),
            child: ToolsUtils.getClientTabBar(tabs, _controller),
          ),
          Expanded(
              child: TabBarView(
                  controller: _controller, children: const [MainCategory(), AncillaryCategory()]))
        ],
      ),
      bottomNavigationBar: SafeArea(
        top: false,
        child: Container(
            height: Sizes.default60,
            alignment: Alignment.topCenter,
            padding: const EdgeInsets.symmetric(vertical: Sizes.default10),
            decoration: const BoxDecoration(color: Colors.white),
            child: SizedBox(
              height: Sizes.default40,
              child: FractionallySizedBox(
                widthFactor: 0.9,
                child: GFButton(
                    onPressed: () {
                      Get.toNamed(RouteGet.categorySecond);
                    },
                    text: '下一步',
                    textStyle: StylesUtils.customTextStyle(fontSize: Sizes.default16),
                    shape: GFButtonShape.pills,
                    type: GFButtonType.solid,
                    size: GFSize.LARGE,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf6)),
              ),
            )),
      ),
    );
  }
}

///
/// 主营品类
///
class MainCategory extends StatefulWidget {
  const MainCategory({Key? key}) : super(key: key);

  @override
  State<MainCategory> createState() => _MainCategoryState();
}

class _MainCategoryState extends State<MainCategory> {
  List<_CategoryMenuTree> trees = [];

  int idx = 0;

  int second = 0;

  late ScrollController leftController;

  late ScrollController midController;

  @override
  void initState() {
    trees.add(_CategoryMenuTree(
        name: '美食',
        children: [
          _CategoryMenuTree(
              name: '快餐素食',
              children: [
                _CategoryMenuTree(name: '意面披萨', checked: true),
                _CategoryMenuTree(name: '汉堡'),
                _CategoryMenuTree(name: '鸡肉卷'),
                _CategoryMenuTree(name: '牛排'),
                _CategoryMenuTree(name: '三明治'),
                _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
                _CategoryMenuTree(name: '焗饭'),
                _CategoryMenuTree(name: '炒面'),
                _CategoryMenuTree(name: '炒粉'),
                _CategoryMenuTree(name: '咖喱饭'),
                _CategoryMenuTree(name: '汤面'),
                _CategoryMenuTree(name: '炒饭'),
                _CategoryMenuTree(name: '桂林米粉'),
                _CategoryMenuTree(name: '螺蛳粉'),
                _CategoryMenuTree(name: '牛腩粉'),
              ],
              checked: true),
          _CategoryMenuTree(name: '小吃', children: [
            _CategoryMenuTree(name: '意面披萨'),
            _CategoryMenuTree(name: '汉堡'),
            _CategoryMenuTree(name: '鸡肉卷'),
            _CategoryMenuTree(name: '牛排'),
            _CategoryMenuTree(name: '三明治'),
            _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
            _CategoryMenuTree(name: '焗饭'),
            _CategoryMenuTree(name: '炒面'),
            _CategoryMenuTree(name: '炒粉'),
            _CategoryMenuTree(name: '咖喱饭'),
            _CategoryMenuTree(name: '汤面'),
            _CategoryMenuTree(name: '炒饭'),
            _CategoryMenuTree(name: '桂林米粉'),
            _CategoryMenuTree(name: '螺蛳粉'),
            _CategoryMenuTree(name: '牛腩粉'),
          ]),
          _CategoryMenuTree(name: '中式菜肴', children: [
            _CategoryMenuTree(name: '意面披萨'),
            _CategoryMenuTree(name: '汉堡'),
            _CategoryMenuTree(name: '鸡肉卷'),
            _CategoryMenuTree(name: '牛排'),
            _CategoryMenuTree(name: '三明治'),
            _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
            _CategoryMenuTree(name: '焗饭'),
            _CategoryMenuTree(name: '炒面'),
            _CategoryMenuTree(name: '炒粉'),
            _CategoryMenuTree(name: '咖喱饭'),
            _CategoryMenuTree(name: '汤面'),
            _CategoryMenuTree(name: '炒饭'),
            _CategoryMenuTree(name: '桂林米粉'),
            _CategoryMenuTree(name: '螺蛳粉'),
            _CategoryMenuTree(name: '牛腩粉'),
          ]),
          _CategoryMenuTree(name: '西式菜肴', children: [
            _CategoryMenuTree(name: '意面披萨'),
            _CategoryMenuTree(name: '汉堡'),
            _CategoryMenuTree(name: '鸡肉卷'),
            _CategoryMenuTree(name: '牛排'),
            _CategoryMenuTree(name: '三明治'),
            _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
            _CategoryMenuTree(name: '焗饭'),
            _CategoryMenuTree(name: '炒面'),
            _CategoryMenuTree(name: '炒粉'),
            _CategoryMenuTree(name: '咖喱饭'),
            _CategoryMenuTree(name: '汤面'),
            _CategoryMenuTree(name: '炒饭'),
            _CategoryMenuTree(name: '桂林米粉'),
            _CategoryMenuTree(name: '螺蛳粉'),
            _CategoryMenuTree(name: '牛腩粉'),
          ]),
          _CategoryMenuTree(name: '火锅', children: [
            _CategoryMenuTree(name: '意面披萨'),
            _CategoryMenuTree(name: '汉堡'),
            _CategoryMenuTree(name: '鸡肉卷'),
            _CategoryMenuTree(name: '牛排'),
            _CategoryMenuTree(name: '三明治'),
            _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
            _CategoryMenuTree(name: '焗饭'),
            _CategoryMenuTree(name: '炒面'),
            _CategoryMenuTree(name: '炒粉'),
            _CategoryMenuTree(name: '咖喱饭'),
            _CategoryMenuTree(name: '汤面'),
            _CategoryMenuTree(name: '炒饭'),
            _CategoryMenuTree(name: '桂林米粉'),
            _CategoryMenuTree(name: '螺蛳粉'),
            _CategoryMenuTree(name: '牛腩粉'),
          ]),
        ],
        checked: true));
    trees.add(_CategoryMenuTree(name: '饮品', children: [
      _CategoryMenuTree(name: '快餐素食', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '小吃', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '中式菜肴', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '西式菜肴', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '火锅', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
    ]));
    trees.add(_CategoryMenuTree(name: '甜品', children: [
      _CategoryMenuTree(name: '快餐素食', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '小吃', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '中式菜肴', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '西式菜肴', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '火锅', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
    ]));
    trees.add(_CategoryMenuTree(name: '糖水', children: [
      _CategoryMenuTree(name: '快餐素食', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '小吃', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '中式菜肴', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '西式菜肴', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '火锅', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
    ]));
    leftController = ScrollController()
      ..addListener(() {
        int offset = leftController.offset ~/ Sizes.default50;
        idx = offset;
        second = 0;
        setState(() {});
      });
    midController = ScrollController()
      ..addListener(() {
        int offset = midController.offset ~/ Sizes.default50;
        second = offset;
        setState(() {});
      });
    super.initState();
  }

  @override
  void dispose() {
    leftController.dispose();
    midController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          width: Sizes.default100,
          child: ListView.builder(
            shrinkWrap: true,
            controller: leftController,
            itemBuilder: (BuildContext ctx, int index) {
              _CategoryMenuTree tree = trees[index];
              return InkWell(
                onTap: () {
                  setState(() {
                    idx = index;
                    leftController.animateTo(index * Sizes.default50,
                        duration: Duration(milliseconds: index * 300), curve: Curves.linear);
                  });
                },
                child: Container(
                  height: Sizes.default50,
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.only(left: Sizes.default15),
                  decoration:
                      BoxDecoration(color: idx == index ? Colors.white : Colors.transparent),
                  child: Text(tree.name,
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15,
                          color: idx == index ? ColorsUtils.color000 : ColorsUtils.color797)),
                ),
              );
            },
            itemExtent: Sizes.default50,
            itemCount: trees.length,
          ),
        ),
        Container(
          width: Sizes.default120,
          padding: const EdgeInsets.only(left: Sizes.default15),
          decoration: const BoxDecoration(color: Colors.white),
          child: ListView.builder(
            itemBuilder: (BuildContext ctx, int index) {
              _CategoryMenuTree tree = trees[idx].children[index];
              return InkWell(
                onTap: () {
                  setState(() {
                    second = index;
                    tree.checked = true;
                    midController.animateTo(index * Sizes.default50,
                        duration: Duration(milliseconds: index * 300), curve: Curves.linear);
                  });
                },
                child: Container(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    tree.name,
                    style: StylesUtils.customTextStyle(
                        fontSize: Sizes.default15,
                        color: index == second ? ColorsUtils.color333 : ColorsUtils.color797),
                  ),
                ),
              );
            },
            controller: midController,
            shrinkWrap: true,
            itemExtent: Sizes.default50,
            itemCount: trees[idx].children.length,
          ),
        ),
        Expanded(
            child: Container(
          padding: const EdgeInsets.only(left: Sizes.default15),
          decoration: const BoxDecoration(color: Colors.white),
          child: ListView.builder(
            itemBuilder: (BuildContext ctx, int index) {
              _CategoryMenuTree tree = trees[idx].children[second].children[index];
              return InkWell(
                onTap: () {
                  setState(() {
                    tree.checked = !tree.checked;
                  });
                },
                child: Container(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    tree.name,
                    style: StylesUtils.customTextStyle(
                        fontSize: Sizes.default15,
                        color: tree.checked ? ColorsUtils.color333 : ColorsUtils.color797),
                  ),
                ),
              );
            },
            shrinkWrap: true,
            itemExtent: Sizes.default50,
            itemCount: trees[idx].children[second].children.length,
          ),
        ))
      ],
    );
  }
}

///
/// 辅营品类（选填）
///
class AncillaryCategory extends StatefulWidget {
  const AncillaryCategory({Key? key}) : super(key: key);

  @override
  State<AncillaryCategory> createState() => _AncillaryCategoryState();
}

class _AncillaryCategoryState extends State<AncillaryCategory> {
  List<_CategoryMenuTree> trees = [];

  int idx = 0;

  int second = 0;

  late ScrollController leftController;

  late ScrollController midController;

  @override
  void initState() {
    trees.add(_CategoryMenuTree(
        name: '美食',
        children: [
          _CategoryMenuTree(
              name: '快餐素食',
              children: [
                _CategoryMenuTree(name: '意面披萨', checked: true),
                _CategoryMenuTree(name: '汉堡'),
                _CategoryMenuTree(name: '鸡肉卷'),
                _CategoryMenuTree(name: '牛排'),
                _CategoryMenuTree(name: '三明治'),
                _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
                _CategoryMenuTree(name: '焗饭'),
                _CategoryMenuTree(name: '炒面'),
                _CategoryMenuTree(name: '炒粉'),
                _CategoryMenuTree(name: '咖喱饭'),
                _CategoryMenuTree(name: '汤面'),
                _CategoryMenuTree(name: '炒饭'),
                _CategoryMenuTree(name: '桂林米粉'),
                _CategoryMenuTree(name: '螺蛳粉'),
                _CategoryMenuTree(name: '牛腩粉'),
              ],
              checked: true),
          _CategoryMenuTree(name: '小吃', children: [
            _CategoryMenuTree(name: '意面披萨'),
            _CategoryMenuTree(name: '汉堡'),
            _CategoryMenuTree(name: '鸡肉卷'),
            _CategoryMenuTree(name: '牛排'),
            _CategoryMenuTree(name: '三明治'),
            _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
            _CategoryMenuTree(name: '焗饭'),
            _CategoryMenuTree(name: '炒面'),
            _CategoryMenuTree(name: '炒粉'),
            _CategoryMenuTree(name: '咖喱饭'),
            _CategoryMenuTree(name: '汤面'),
            _CategoryMenuTree(name: '炒饭'),
            _CategoryMenuTree(name: '桂林米粉'),
            _CategoryMenuTree(name: '螺蛳粉'),
            _CategoryMenuTree(name: '牛腩粉'),
          ]),
          _CategoryMenuTree(name: '中式菜肴', children: [
            _CategoryMenuTree(name: '意面披萨'),
            _CategoryMenuTree(name: '汉堡'),
            _CategoryMenuTree(name: '鸡肉卷'),
            _CategoryMenuTree(name: '牛排'),
            _CategoryMenuTree(name: '三明治'),
            _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
            _CategoryMenuTree(name: '焗饭'),
            _CategoryMenuTree(name: '炒面'),
            _CategoryMenuTree(name: '炒粉'),
            _CategoryMenuTree(name: '咖喱饭'),
            _CategoryMenuTree(name: '汤面'),
            _CategoryMenuTree(name: '炒饭'),
            _CategoryMenuTree(name: '桂林米粉'),
            _CategoryMenuTree(name: '螺蛳粉'),
            _CategoryMenuTree(name: '牛腩粉'),
          ]),
          _CategoryMenuTree(name: '西式菜肴', children: [
            _CategoryMenuTree(name: '意面披萨'),
            _CategoryMenuTree(name: '汉堡'),
            _CategoryMenuTree(name: '鸡肉卷'),
            _CategoryMenuTree(name: '牛排'),
            _CategoryMenuTree(name: '三明治'),
            _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
            _CategoryMenuTree(name: '焗饭'),
            _CategoryMenuTree(name: '炒面'),
            _CategoryMenuTree(name: '炒粉'),
            _CategoryMenuTree(name: '咖喱饭'),
            _CategoryMenuTree(name: '汤面'),
            _CategoryMenuTree(name: '炒饭'),
            _CategoryMenuTree(name: '桂林米粉'),
            _CategoryMenuTree(name: '螺蛳粉'),
            _CategoryMenuTree(name: '牛腩粉'),
          ]),
          _CategoryMenuTree(name: '火锅', children: [
            _CategoryMenuTree(name: '意面披萨'),
            _CategoryMenuTree(name: '汉堡'),
            _CategoryMenuTree(name: '鸡肉卷'),
            _CategoryMenuTree(name: '牛排'),
            _CategoryMenuTree(name: '三明治'),
            _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
            _CategoryMenuTree(name: '焗饭'),
            _CategoryMenuTree(name: '炒面'),
            _CategoryMenuTree(name: '炒粉'),
            _CategoryMenuTree(name: '咖喱饭'),
            _CategoryMenuTree(name: '汤面'),
            _CategoryMenuTree(name: '炒饭'),
            _CategoryMenuTree(name: '桂林米粉'),
            _CategoryMenuTree(name: '螺蛳粉'),
            _CategoryMenuTree(name: '牛腩粉'),
          ]),
        ],
        checked: true));
    trees.add(_CategoryMenuTree(name: '饮品', children: [
      _CategoryMenuTree(name: '快餐素食', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '小吃', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '中式菜肴', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '西式菜肴', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '火锅', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
    ]));
    trees.add(_CategoryMenuTree(name: '甜品', children: [
      _CategoryMenuTree(name: '快餐素食', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '小吃', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '中式菜肴', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '西式菜肴', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '火锅', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
    ]));
    trees.add(_CategoryMenuTree(name: '糖水', children: [
      _CategoryMenuTree(name: '快餐素食', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '小吃', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '中式菜肴', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '西式菜肴', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
      _CategoryMenuTree(name: '火锅', children: [
        _CategoryMenuTree(name: '意面披萨'),
        _CategoryMenuTree(name: '汉堡'),
        _CategoryMenuTree(name: '鸡肉卷'),
        _CategoryMenuTree(name: '牛排'),
        _CategoryMenuTree(name: '三明治'),
        _CategoryMenuTree(name: '轻食/沙拉/健康餐'),
        _CategoryMenuTree(name: '焗饭'),
        _CategoryMenuTree(name: '炒面'),
        _CategoryMenuTree(name: '炒粉'),
        _CategoryMenuTree(name: '咖喱饭'),
        _CategoryMenuTree(name: '汤面'),
        _CategoryMenuTree(name: '炒饭'),
        _CategoryMenuTree(name: '桂林米粉'),
        _CategoryMenuTree(name: '螺蛳粉'),
        _CategoryMenuTree(name: '牛腩粉'),
      ]),
    ]));
    leftController = ScrollController()
      ..addListener(() {
        int offset = leftController.offset ~/ Sizes.default50;
        idx = offset;
        second = 0;
        setState(() {});
      });
    midController = ScrollController()
      ..addListener(() {
        int offset = midController.offset ~/ Sizes.default50;
        second = offset;
        setState(() {});
      });
    super.initState();
  }

  @override
  void dispose() {
    leftController.dispose();
    midController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          width: Sizes.default100,
          height: double.maxFinite,
          child: ListView.builder(
            shrinkWrap: true,
            controller: leftController,
            itemBuilder: (BuildContext ctx, int index) {
              _CategoryMenuTree tree = trees[index];
              return InkWell(
                onTap: () {
                  setState(() {
                    idx = index;
                    leftController.animateTo(index * Sizes.default50,
                        duration: Duration(milliseconds: index * 300), curve: Curves.linear);
                  });
                },
                child: Container(
                  height: Sizes.default50,
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.only(left: Sizes.default15),
                  decoration:
                      BoxDecoration(color: idx == index ? Colors.white : Colors.transparent),
                  child: Text(tree.name,
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15,
                          color: idx == index ? ColorsUtils.color000 : ColorsUtils.color797)),
                ),
              );
            },
            itemExtent: Sizes.default50,
            itemCount: trees.length,
          ),
        ),
        Container(
          height: double.maxFinite,
          width: Sizes.default120,
          padding: const EdgeInsets.only(left: Sizes.default15),
          decoration: const BoxDecoration(color: Colors.white),
          child: ListView.builder(
            itemBuilder: (BuildContext ctx, int index) {
              _CategoryMenuTree tree = trees[idx].children[index];
              return InkWell(
                onTap: () {
                  setState(() {
                    second = index;
                    tree.checked = true;
                    midController.animateTo(index * Sizes.default50,
                        duration: Duration(milliseconds: index * 300), curve: Curves.linear);
                  });
                },
                child: Container(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    tree.name,
                    style: StylesUtils.customTextStyle(
                        fontSize: Sizes.default15,
                        color: index == second ? ColorsUtils.color333 : ColorsUtils.color797),
                  ),
                ),
              );
            },
            controller: midController,
            shrinkWrap: true,
            itemExtent: Sizes.default50,
            itemCount: trees[idx].children.length,
          ),
        ),
        Expanded(
            child: Container(
          height: double.maxFinite,
          padding: const EdgeInsets.only(left: Sizes.default15),
          decoration: const BoxDecoration(color: Colors.white),
          child: ListView.builder(
            itemBuilder: (BuildContext ctx, int index) {
              _CategoryMenuTree tree = trees[idx].children[second].children[index];
              return InkWell(
                onTap: () {
                  setState(() {
                    tree.checked = !tree.checked;
                  });
                },
                child: Container(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    tree.name,
                    style: StylesUtils.customTextStyle(
                        fontSize: Sizes.default15,
                        color: tree.checked ? ColorsUtils.color333 : ColorsUtils.color797),
                  ),
                ),
              );
            },
            shrinkWrap: true,
            itemExtent: Sizes.default50,
            itemCount: trees[idx].children[second].children.length,
          ),
        ))
      ],
    );
  }
}

class _CategoryMenuTree {
  String name;

  List<_CategoryMenuTree> children;

  bool checked = false;

  _CategoryMenuTree({required this.name, this.children = const [], this.checked = false});
}
